/*账户总览-股票界面上部份*/
<template>
  <div class="stock-account-over">
      <div class="stock-total">
        <div class="stock-total-note">
          <div>模拟交易总资产(元)</div>
          <span>(含股票、组合、场内基金、场外基金)</span>
        </div>
        <div class="stock-total-balance"><span>¥</span>{{fundBalance}}</div>
      </div>
      <div class="stock-enable">
        <div class="stock-enable-note">可用资产/元</div>
        <div class="stock-enable-balance">{{enableBalance}}</div>
      </div>
      <div class="stock-over-middle">
        <div class="over-mid">
          <div class="one">
            <div :class="totalFloatprofit<0?'color-green':'color-red'">{{totalFloatprofit}}</div>
          </div>
          <div class="two">
            <div>累计盈亏</div>
            <div>(含股票、组合、场内基金)</div>
          </div>
        </div>
        <div class="over-mid">
          <div class="one">
            <div :class="dayIncomeBalance<0?'color-green':'color-red'">{{dayIncomeBalance}}</div>
          </div>
          <div class="two">
            <div>日盈亏</div>
            <div>(含股票、组合、场内基金)</div>
          </div>
        </div>
        <div class="over-mid-bottom">
          <div>普通交易总市值/元<span>(含股票、组合、场内基金)</span>:</div>
          <div class="market-balance">{{marketBalance}}</div>
        </div>
      </div>
  </div>
</template>

<script>
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import RemoteDAO from 'common/remoteDAO'
  import CommonUtil from 'common/common.util'

  export default {
    data () {
      return {
        fundBalance:'--',//模拟交易总资产
        enableBalance: '--',//可用资产
        marketBalance: '--',//普通交易总市值
        totalFloatprofit: '--',//累计盈亏
        dayIncomeBalance: '--'//日盈亏
      }
    },
    props:{
      userCode:{
        type:String
      }
    },
    created:function(){
      this.fetchData();
    },
    mounted:function(){
      let height = this.$store.state.htmlHeight;
      if(!height){
      	height = document.documentElement.getBoundingClientRect().height || 667
      	this.$store.dispatch('setHtmlHeight',height)
      }
      let rem = height/33.35;//iphone6下,1px=20rem,其它屏幕根据高度按比例伸缩
      document.documentElement.style.fontSize = rem +'px';
    },
    destroyed:function(){
      let html = document.documentElement;
      html.style.fontSize = '';
    },
    methods: {
      fetchData(){
        //获取用户资产信息
        RemoteDAO.callJCL11103(this.userCode, response => {
          if (response.error == 0) {
            let data = response.data.body.data[0];
            this.fundBalance = CommonUtil.toFixed(data.fund_balance, 2);
            this.marketBalance = CommonUtil.toFixed(data.market_balance, 2);
            this.enableBalance = CommonUtil.toFixed(data.enable_balance, 2);
            this.totalFloatprofit = CommonUtil.toFixed(data.total_floatprofit, 2) || '--';
            if(data.total_floatprofit>=0){
              this.totalFloatprofit = '+'+this.totalFloatprofit
            }else if(this.totalFloatprofit == 0){
              this.totalFloatprofit = '-'+this.totalFloatprofit
            }
            this.dayIncomeBalance = CommonUtil.toFixed(data.day_income_balance, 2) || '--';
            if(data.day_income_balance>=0){
              this.dayIncomeBalance = '+'+this.dayIncomeBalance
            }else if(this.totalFloatprofit == 0){
              this.dayIncomeBalance = '-'+this.dayIncomeBalance
            }
          } else {
            this.$store.dispatch('setTip', {time: 2200,text: '普通交易总资产查询失败：'+response.data});
          }
        })
      }
    }
  }
</script>

<style scoped>
  .stock-account-over {
    z-index: 997;
    position: relative;
    width: 100%;
    background: #EC4F4F;
    display: inline-block;
    padding-bottom: 0.45rem;
    color: #FFFFFF;
  }

  .stock-account-over .stock-total {
    width: 60%;
    height: 4.86rem;
    padding: 1rem 0.25rem 0.35rem 1rem;
    float: left;
    display: inline-block;
  }
  .stock-account-over .stock-total .stock-total-note {
    font-size: 0.7rem;
  }
  .stock-account-over .stock-total .stock-total-note span {
    font-size: 0.5rem;
  }

  .stock-account-over .stock-total-balance {
    height: 1.5rem;
    line-height: 1.5rem;
    font-size: 1.25rem;
    font-weight: bold;
    color: #FFFF9E;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .stock-account-over .stock-total-balance span {
    font-size: 1rem;
    margin-right: 0.2rem;
    vertical-align: top;
    font-weight: normal;
  }

  .stock-account-over .stock-enable {
    width: 40%;
    height: 4.85rem;
    font-size: 0.6rem;
    position: relative;
    float: left;
    display: inline-block;
  }

  .stock-account-over .stock-enable .stock-enable-note {
    font-size: 0.6rem;
    margin-top: 2.5rem;
  }

  .stock-account-over .stock-enable .stock-enable-balance {
    font-size: 0.7rem;
  }

  .stock-over-middle {
    background: RGBA(187,45,45,0.4);
    display: inline-block;
    width: 100%
  }

  .stock-over-middle .over-mid{
    width: 44%;
    float: left;
    position: relative;
    padding: 0.35rem 0;
  }

  .stock-over-middle .over-mid:nth-child(1) {
    margin-left: 6%;
  }

  .stock-over-middle .over-mid:nth-child(2) {
    margin-right: 6%;
  }

  .stock-over-middle > .over-mid >div{
    display: inline-block;
  }
  .stock-over-middle > .over-mid > .one{
    width: 53%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -0.625rem;
    text-align: center;
  }
  .stock-over-middle > .over-mid > .one > div{
    display: inline-block;
    background: #6F2C2C;
    border-radius: 0.65rem;
    padding: 2px 5px;
    font-size: 0.7rem;
    text-align: center;
    min-width: 50%;
    max-width: 98%;
    word-break: break-all;
    line-height: 1;
  }
  .stock-over-middle > .over-mid > .two{
    float: right;
    width: 47%;
    line-height: 0.75rem;
  }
  .stock-over-middle > .over-mid > .two >div:nth-child(1) {
    font-size: 0.6rem;
  }

  .stock-over-middle > .over-mid > .two >div:nth-child(2){
    font-size: 0.5rem;
  }

  .stock-over-middle .over-mid-bottom {
    width: 88%;
    padding: 0.25rem 0 0.3rem;
    border-top: dashed 0.05rem #FFFFFF;
    margin: 0 6%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .stock-over-middle .over-mid-bottom div {
    display: inline-block;
    font-size: 0.6rem;
  }
  .stock-over-middle .over-mid-bottom span{
    font-size: 0.5rem;
  }
  .stock-over-middle .over-mid-bottom .market-balance{
    font-size: 0.7rem !important;
    margin-right: 0.25rem;
  }
  .color-red{
    color:#F63B3B !important;
  }
  .color-green{
    color:#89CD4C!important
  }

</style>
